<template>
  <div class="modal" v-if="visible">
    <div class="modal-content">
      <div class="modal-header">
        <h3>{{ isEditing ? '编辑考生信息' : '添加新考生' }}</h3>
        <button class="modal-close" @click="close">
          <i class="icon-close"></i>
        </button>
      </div>
      <div class="modal-body">
        <form @submit.prevent="submit">
          <div class="form-group">
            <label>用户名</label>
            <input
                type="text"
                v-model="formData.username"
                required
                placeholder="请输入用户名"
            >
          </div>
          <div class="form-group">
            <label>真实姓名</label>
            <input
                type="text"
                v-model="formData.real_name"
                placeholder="请输入真实姓名"
            >
          </div>
          <div class="form-group">
            <label>邮箱</label>
            <input
                type="email"
                v-model="formData.email"
                placeholder="请输入邮箱"
            >
          </div>
          <div class="form-group">
            <label>手机号</label>
            <input
                type="tel"
                v-model="formData.phone"
                placeholder="请输入手机号"
            >
          </div>
          <div class="form-group">
            <label>初始密码</label>
            <input
                type="password"
                v-model="formData.password"
                :required="!isEditing"
                placeholder="请输入密码"
            >
          </div>
          <div class="form-group">
            <label>账号状态</label>
            <div class="radio-group">
              <label>
                <input type="radio" v-model="formData.status" :value="0"> 正常
              </label>
              <label>
                <input type="radio" v-model="formData.status" :value="1"> 禁用
              </label>
            </div>
          </div>
          <div class="form-actions">
            <button type="button" class="btn btn-cancel" @click="close">取消</button>
            <button type="submit" class="btn btn-submit">
              {{ isEditing ? '保存更改' : '添加考生' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddEditStudentModal',
  props: {
    visible: Boolean,
    isEditing: Boolean,
    studentData: Object
  },
  data() {
    return {
      formData: {
        user_id: null,
        username: '',
        real_name: '',
        email: '',
        phone: '',
        password: '',
        status: 0
      }
    }
  },
  watch: {
    studentData: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.formData = { ...newVal, password: '' }
        } else {
          this.resetForm()
        }
      }
    }
  },
  methods: {
    resetForm() {
      this.formData = {
        user_id: null,
        username: '',
        real_name: '',
        email: '',
        phone: '',
        password: '',
        status: 0
      }
    },
    submit() {
      this.$emit('submit', this.formData)
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/styles/variables.less";

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;

  .modal-content {
    background: white;
    border-radius: @radius-md;
    width: 100%;
    max-width: 500px;
    box-shadow: @shadow-lg;
    overflow: hidden;

    .modal-header {
      padding: 1.25rem 1.5rem;
      border-bottom: 1px solid @gray-200;
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        margin: 0;
        font-size: 1.25rem;
        color: @gray-800;
      }

      .modal-close {
        background: none;
        border: none;
        font-size: 1.25rem;
        cursor: pointer;
        color: @gray-500;
        transition: @transition;

        &:hover {
          color: @gray-700;
        }
      }
    }

    .modal-body {
      padding: 1.5rem;

      .form-group {
        margin-bottom: 1.25rem;

        label {
          display: block;
          margin-bottom: 0.5rem;
          font-size: 0.875rem;
          color: @gray-600;
          font-weight: 500;
        }

        input {
          width: 100%;
          padding: 0.75rem;
          border: 1px solid @gray-300;
          border-radius: @radius-sm;
          font-size: 0.9375rem;
          transition: @transition;

          &:focus {
            outline: none;
            border-color: @primary;
            box-shadow: 0 0 0 3px rgba(@primary, 0.1);
          }

          &::placeholder {
            color: @gray-400;
          }
        }

        .radio-group {
          display: flex;
          gap: 1rem;

          label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: normal;
            cursor: pointer;
          }
        }
      }

      .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        margin-top: 1.5rem;
      }
    }
  }
}

.btn {
  padding: 0.75rem 1.25rem;
  border-radius: @radius-md;
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: @transition;
  border: none;

  &.btn-cancel {
    background: white;
    color: @gray-600;
    border: 1px solid @gray-300;

    &:hover {
      background: @gray-100;
    }
  }

  &.btn-submit {
    background: @primary;
    color: white;

    &:hover {
      background: darken(@primary, 5%);
    }
  }
}

.icon-close {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
</style>